<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MJの簡単な利用例 - MJ</title>

<!-- MJを読み込む -->
<script type="text/javascript" src="../lib/MJ.min.js" charset="utf-8"></script>

<!-- jQueryを読み込む -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4");</script>

<!-- このファイル用のスクリプト -->
<script type="text/javascript">
// 画像ファイル置き場
var IMG_DIR = 'img';

/**
 * 入力された手牌の役を判定します
 * 結果は#tehai_viewに表示されます
 *
 * 手牌は','区切りで入力し、最後の牌が当たり牌となります
 *
 * @param f フォーム
 */
function checkTehai(f) {
	// フォームに入力された値
	if (!f.pais.value) {
		alert("手牌を入力してください");
		return;
	}
	var pais = f.pais.value.split(/,/);
	if (pais.length != 14) {
		alert("手牌は14個にしてください");
		return;
	}
	var atari = pais[pais.length];

	// 手牌オブジェクトを生成
	var tehai = new MJ.Tehai();

	// フォームに入力された値をセット
	if (!tehai.addAll(pais, atari)) {
		alert("手牌を解釈できませんでした");
		return;
	}

	// 役を判定する
	var yaku_array = MJ.Hantei.getResult(tehai) || [];

	// 手牌を表示する
	showTehai(tehai);

	// 役を表示する
	showYaku(yaku_array);
}

/**
 * 手牌を表示する
 *
 * @param tehai MJ.Tehaiオブジェクト
 */
function showTehai(tehai) {
	var pai_array = tehai.get();
	var img_array = [];
	for (var i = 0; i < pai_array.length; i++) {
		if (!pai_array[i]) {
			$('#debug').html(pai_array.join(', '));
			continue;
		}
		img_array.push(pai2img(pai_array[i]));
	}
	$('#tehai_view .tehai_image').html(img_array.join(''));
}

/**
 * 牌をimgタグに変換する
 *
 * @param pai 牌
 * @return imgタグ
 */
function pai2img(pai) {
	switch (pai) {
	case '白':
		pai = "d1";
		break;
	case '發':
		pai = "d2";
		break;
	case '中':
		pai = "d3";
		break;
	case '東':
		pai = "f1";
		break;
	case '西':
		pai = "f2";
		break;
	case '南':
		pai = "f3";
		break;
	case '北':
		pai = "f4";
		break;
	default:
		pai = pai.split('').reverse().join('');
		break;
	}
	return '<img src="' + IMG_DIR + '/MJ' + pai + 'plane.png" />';
}

/**
 * 役を表示する
 *
 * @param yaku_array 役一覧
 */
function showYaku(yaku_array) {
	if (yaku_array.length) {
		var li_array = [];
		for (var i = 0; i < yaku_array.length; i++) {
			li_array.push('<li>' + yaku_array[i].name + '</li>');
		}
		$('#tehai_view .yaku_array').html('<ul>' + li_array.join('') + '</ul>');
	} else {
		$('#tehai_view .yaku_array').html('<p>役無し</p>');
	}
}
</script>

</head>

<body>

<h1>MJの簡単な利用例</h1>

<p>手牌を','区切りで入力し、役を判定します。</p>

<form action="#" onsubmit="checkTehai(this); return false">
	<div>
		<input type="text" name="pais" value="1m,2m,3m,4m,5m,6m,7m,8m,9m,1p,2p,3p,4p,4p" size="60" />
		<input type="submit" value="手牌を判定する" />
	</div>
</form>

<br />

<div id="tehai_view">
	<div class="tehai_image"></div>
	<div class="yaku_array"></div>
</div>

<div id="debug">
</div>

</body>

</html>
